<template>
  	<view class="index_wrap">
 		<view class="repair-wrap">
			<!-- <viewData :type="'noData'" :nextPage="!nextPage" :isTab="false" :isData="repairList.length < 1" :loading="loading"
					  @onRefresh="onRefresh"> -->
				<!-- <view style="width: 100%;height: 72px;border: 1px solid #F5F5F5;background: #fff;z-index: 1;position: fixed;">
					<view style="width: 90%;margin: 0 auto;">
						<view class="search">
							<view  class="u-flex-1 u-m-r-10 ">
								<u-input style='text-indent: 30rpx;border-radius: 26px;border: 1px solid #427705;' 
								v-model="form.names"   placeholder='请输入标题'  />
							</view>
							<view @click="getList">搜索</view>
						</view>
					</view>
				</view> -->
				<view style="background-color: #ffffff;">
					<view class="header">
						<view class="search">
							<input v-model="form.names" class="search-input" placeholder="请输入名称" />
							<image @click="clear" src="../../static/image/11.png" class="search-clear"></image>
							<view @click="onSearch">搜索</view>
						</view>
					</view>
				</view>
				<view >
					<view style="border-top: 1px solid #F7F8F9;background-color: #FFFFFF;margin-top: 10px;" v-for="(item,index) in repairList">
						<view style="width: 88%;margin:auto;">
							<view class="header-li" @click="navTo('/pages/mine/manualDetail',item)">
								<view>
									<view style="display: flex;">
										<image style="width: 24px;height: 21px;margin-top: 15px;" src="@/static/image/community.png" mode=""></image>
										<view style="margin-left: 6px;">{{item.manual_name}}</view>
									</view>
									
								</view>
							</view>
							<image style="width: 8px;height: 10px;float: right; margin-top: -33px;" src="../../static/image/right.png" mode=""></image>
						</view>
					</view>
				</view>
				
			<!-- </viewData> -->
 		</view>
		<!-- 提交弹窗 -->
		<view class="modal" v-if="txTank">
			<view class="modal-cont">
				<view class="modal-title">提醒</view>
				<view style="color: #000000;margin-top: 30px;">
					没有找到您需要的操作步骤
				</view>
				<view style="color: #999;width: 279px;margin-top: 13px">
					是否向平台官方申请增加"{{this.text}}"的使用方法步骤？
				</view>
		
		
				<view class="modal-bottom">
					<view class="btn-cancel1" @click="handleClose">否</view>
					<view class="btn-sure" @click="addBank">是</view>
				</view>
			</view>
		</view>
		
		
		
		<view class="modal" v-if="submitFlag">
			<view class="modal-cont">
				<view class="modal-title">用户帮助手册提交</view>
				<view class="header-li" style="margin-top: 30px;width: 78%;">
					<view class="header-name">位置</view>
					<picker :value="indes" @change="typeBtn" :range="time" range-key="name" mode="selector">
						<view class="form-select">{{time[indes].name}}</view>
					</picker>
				</view>
		
				<view class="header-li" style="width: 78%;">
					<view class="header-name">类型</view>
					<picker style="width: 100px;" :value="indexe" @change="typeBtnMan" :range="manual"
						range-key="name" mode="selector">
						<view class="form-select">{{manual[indexe].name}}</view>
					</picker>
				</view>
				<view class="header-li" style="width: 78%;">
					<view class="header-name">模块</view>
					<picker style="width: 100px;" :value="index" @change="typeMan" :range="typeList"
						range-key="menu_name" mode="selector">
						<view class="form-select">{{typeList[index].menu_name}}</view>
					</picker>
				</view>
				<view class="header-li" style="width: 78%;">
					<view class="header-name">名称</view>
					<input v-model="submitInfo.submitName" placeholder="请输入名称" style="margin-top: 15px;"  />
				</view>
				<view style="margin-top: 14px;margin-left: 14px;">
					<view>备注</view>
					<textarea v-model="submitInfo.remark" class="text-area" placeholder="请说明理由" />
				</view>
		
				<view class="modal-bottom">
					<view class="btn-cancel1" @click="closeEmpty">取消</view>
					<view class="btn-sure" @click="submitClick">确定</view>
				</view>
			</view>
		</view>
  	</view>
  </template>
  
  <script>
  	export default {
  		data() {
  			return {
  				
  				// index:0,
 				type:1,
 				array:['分类','分类二'],
 				ruleForm:{
 					renType:null,
 				},
				form:{
					manual_position:3,//手册位置:1.后台系统，2.员工端APP，3.业主单APP
					manual_typename:null,//手册分类名称
					names:null,//搜索
				},
				repairList:[],//用户列表
				pageIndex:1,
				loading: false,
				// type: 1,
				nextPage:false,
				submitInfo: {
					submitType: null,
					manualForm: null,
					submitText: null,
					remark: null,
					submitName: null,
				},
				txTank: false,
				text: null,
				submitFlag: false,
				time: [
					{
						id:0,
						name: '请选择'
					},
					{
						id: 1,
						name: '后台系统'
					},
					{
						id: 2,
						name: '员工端App'
					},
					{
						id: 3,
						name: '业工端App'
					}
				],
				indes: 0,
				manual: [{
						id: 0,
						name: '请选择'
					},
					{
						id: 1,
						name: '流程'
					},
					{
						id: 2,
						name: '使用方法'
					},
				],
				indexe: 0,
				typeList: [{
					menu_name: '请选择'
				}],
				index:0
  			}
  		},
  		onLoad() {
  			// this.bol = !this.bol
  		},
  		onShow() {
  			this.getList()
			// this.getTypeByHouTai()
  		},
		onPullDownRefresh() {
			this.getList()
		},
  		methods: {
			handleClose(){
				this.txTank = false
				this.form.names = null
				this.getList()
			},
			addBank() {
				this.submitFlag = true;
				this.txTank = false;
				this.getTypeByHouTai()
			},
			closeEmpty() {
				this.submitFlag = false;
			},
			submitClick(){
				if (this.submitInfo.submitType == null) {
					uni.showToast({
						title: "请选择位置",
						success: "200"
					})
					return;
				}
				if (this.submitInfo.manualForm == null) {
					uni.showToast({
						title: "请选择分类",
						success: "200"
					})
					return;
				}
				if (this.submitInfo.submitText == null) {
					uni.showToast({
						title: "请选择模块",
						success: "200"
					})
					return;
				}
				if (this.submitInfo.submitName == null) {
					uni.showToast({
						title: "请输入名称",
						success: "200"
					})
					return;
				}
				this.$request.api.getsubmitClick({
					user_id: JSON.parse(uni.getStorageSync('userData')).userId,
					submit_type: this.submitInfo.submitType,
					manual_form: this.submitInfo.manualForm,
					submit_text: this.submitInfo.submitText,
					submit_remark: this.submitInfo.remark,
					submit_name: this.submitInfo.submitName,
				}).then(res=>{
					uni.showToast({
						title: "提交成功！",
						success: "200"
					})
					this.getList()
					this.submitFlag = false;
					this.submitInfo.submitType = null;
					this.submitInfo.submitText = null;
					this.submitInfo.remark = null;
				})
			},
			//制定时间选择
			typeBtn: function(e) {
				console.log(e)
				this.indes = e.target.value
				console.log(this.indes)
				this.submitInfo.submitType = this.time[this.indes].name
				console.log(this.submitInfo.submitType)
			},
			typeBtnMan: function(e) {
				this.indexe = e.target.value
				this.submitInfo.manualForm = this.manual[this.indexe].name
			},
			typeMan: function(e) {
				this.index = e.target.value
				this.submitInfo.submitText = this.typeList[this.index].menu_name
			},
			getTypeByHouTai() {
				this.$request.api.gettypeList({
					org_id: 461,
					user_id: JSON.parse(uni.getStorageSync('userData')).userId
				}).then(res => {
					this.typeList = res.data.data.datalist;
					this.typeList.splice(0, 0, {
						menu_name: "请选择"
					})
				})
			},
			// onRefresh() {
			// 	if (!this.nextPage) {
			// 		this.pageIndex = this.pageIndex + 1;
			// 		this.getList();
			// 	}
			// },
  			// 获取列表
  			getList() {
				console.log(this.pageIndex,'pageindex')
				if (this.pageIndex < 2) {
					uni.showLoading({
						title: '加载中'
					});
				}
				this.loading = false;
  				this.$request.api.getManuallist({
  					pageIndex:this.pageIndex,
  					manual_position:3,//手册位置:1.后台系统，2.员工端APP，3.业主单APP
  					names:this.form.names,
  				}).then(res => {
					console.log(res)
					if (this.pageIndex == 1) {
						this.repairList = res.data.data.datalist || [];
					} else {
						this.repairList = [...this.repairList, ...res.data.data.datalist];
					}
					if (res.data.data.total == 0) {
						console.log(res.data.data.total)
						var text = null;
						if (this.form.manual_position != null) {
							if (this.form.manual_position == 1) {
								text = '后台系统'
							} else if (this.form.manual_position == 2) {
								text = '员工端APP'
							} else if (this.form.manual_position == 3) {
								text = '业主端APP'
							}
							this.submitInfo.submitType = text;
						}
						if (this.form.names != null) {
							text = this.form.names;
							this.submitInfo.submitName = this.form.names;
						}
						if (this.form.manual_typename) {
							text = this.form.manual_typename;
							this.submitInfo.submitText = text;
						}
						this.text = text;
						this.txTank = true;
					}
					console.log(this.repairList)
                    this.nextPage = this.pageIndex < (res.data.data.total/10)? true:false
					this.loading = true;
					uni.hideLoading();
					
  					// this.repairList = res.data.data.datalist
  					// console.log(this.repairList)
  				})
				console.log(this.nextPage)
				uni.stopPullDownRefresh()
  			},
			navTo(url,item) {
				let items = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url: url + '?item='+ items
				});
			},
			clear() {
				this.form.names = null;
				this.onSearch()
			},
			//搜索
			onSearch() {
				this.pageIndex = 1;
				this.getList()
			},
  			checked(index) {
  				this.isActive = index
  			},
  			shouList(){
  				this.indexList =! this.indexList
  			},
			//清除搜索数据
			clearSearchData(){
				this.form.names = null
				this.getList()
			},
  		}
  	}
  </script>
  
  <style scoped>
  /* 	.index_wrap {
  		width: 100vw;
  		height: auto;
  		overflow: hidden;
  	}
 	.repair-wrap {
 		width: 100%;
 		min-height: 100vh;
 		height: auto;
 		background: #f4f4f4;
 		overflow: hidden;
 	} */
 	.header-li {
 		display: flex;
 		/* // align-items: center; */
 		font-family: PingFangSC-Medium, PingFang SC;
 		font-weight: 500;
 		line-height: 102rpx;
 		color: #333333;
 		border-bottom: 1rpx solid #EEEEEE;
		
 	}
 	.header-li i{
		width: 6px;
		height: 16px;
		background: linear-gradient(180deg, #76D904 0%,#417505 100%);
		border-radius: 4px;
		display: inline-block;
		vertical-align: middle;
		margin-top: 20px;
	}
 	.header-name {
 		width: 42px;
 	}
	.header {
		width: 100%;
		background-color: #FFFFFF;
	}
	
	.search {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #417505;
		height: 100rpx;
		// border-bottom: 1rpx solid #eeeeee;
		position: relative;
		width: 90%;
		margin: 0 auto;
	}
		.search-clear {
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			left: 560rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	
		.search-input {
			width: 613rpx;
			height: 66rpx;
			background: #f0f2f5;
			border-radius: 33rpx;
			line-height: 66rpx;
			font-size: 28rpx;
			padding: 0 33rpx;
			color: #333333;
			box-sizing: border-box;
		}
	
	.modal {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 10;
	}
	
	.modal-cont {
		width: 610rpx;
		// min-height: 420rpx;
		background: #ffffff;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.modal-icon {
		width: 80rpx;
		height: 80rpx;
		margin-top: 67rpx;
	}
	
	.modal-title {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 45rpx;
		margin-top: 22rpx;
		font-weight: 600;
	}
	
	.modal-content {
		width: 443rpx;
		// height: 88rpx;
		font-size: 28rpx;
		text-align: center;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 44rpx;
		margin-top: 24rpx;
	}
	
	.text-area {
		margin-top: 24rpx;
		width: 520rpx;
		padding: 10rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 44rpx;
		max-height: 105rpx;
		border: 1rpx solid #f0f0f0;
		border-radius: 8rpx;
	}
	
	.modal-bottom {
		width: 100%;
		height: 84rpx;
		border-top: 1rpx solid #e6e9ed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 50rpx;
	}
	
	.btn-cancel {
		width: 50%;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		border-right: 1rpx solid #d8d8d8;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		box-sizing: border-box;
	}
	
	.btn-cancel1 {
		width: 50%;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		/* border-right: 1rpx solid #d8d8d8; */
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		box-sizing: border-box;
		border-right: 1px solid #ddd;
	}
	
	.btn-sure {
		width: 50%;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #578ef0;
	}
	
	
	
		.text-area {
			width: 480rpx;
			padding-top: 20rpx;
			height: 160rpx;
		}
	
		.form-input {
			width: 480rpx;
		}
	
		.form-select {
			width: 133px;
			background: url(../../static/image/right.png) no-repeat center right;
			background-size: 10rpx 17rpx;
		}
	
  	
  </style>
  